/*
    打包图片路径（不是css中的图片路径）
    
    index.html里写一个<img src='dog-year.png'/>标签，打包后dist/下并没有dog-year.png这张图片，这是因为webpack并不希望多次请求http，所以这样是打包不成的，
    不建议这么干。但国人发明了一个loader可以处理img标签的src路径，执行npm i --save-dev html-withimg-loader.

    index.html中的img标签内的src属性值写成 ./asset/imgs/dog-year.png 或 asset/imgs/dog-year.png，打包后都变成<img src="asset/imgs/4acf50940ecfa2c04723b5530159a04c.png">,
    但不能写成./asset/imgs/dog-year.png，这样找不到路径
*/

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin'); // 代码压缩，不需安装就可使用
const htmlPlugin = require('html-webpack-plugin'); // 用来打包index.html文件，需要npm install --save-dev html-webpack-plugin，才能使用
const extractTextPlugin = require('extract-text-webpack-plugin'); // 为了能分离css，需要先npm install --save-dev extract-text-webpack-plugin安装

let webSite = { // 公共绝对路径
    publicPath: 'http://192.168.31.163:1717/' // 记得最后加上 /
};

module.exports = {
    entry: { // 入口配置项
        entry: './src/index.js' // 多入口文件1，file1可以任意写
    },
    output: { // 出口配置项
        path: path.resolve(__dirname, 'dist'), // 绝对路径
        filename: '[name].js', // 多出口文件名,动态[name]的值呼应entry选项里的entry1和entry2。这里的出口文件不是针对index.html
        publicPath: webSite.publicPath
    },
    module: { // 打包css、图片转换、压缩，把sass转换为css、es6转换为浏览器兼容的代码、react的语法转换成js代码
        // module里都是loader，npm install完毕后不需通过require('')引入，而插件需要引入成一个对象，而后在plugins选项里使用
        rules: [
            {
                test:/\.css$/,
                use: extractTextPlugin.extract({ // 修改loader
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
            {
                test: /\.(png|jpg|gif)/,
                use:[
                    { // url-loader可改变所有图片的路径，不仅仅是css中的图片，index.html中的img标签的路径也可以
                        loader: 'url-loader', // url-loader解决图片打包后的url或base64，使css中的url可以正常渲染。url-loader自带对file-loader的依赖，但是file-loader还是需要安装的
                        options: {
                            limit: 100, // 单位字节（b），大于等于这个数值的话拷贝这个图片到dist/下，生成url，小于的话在js里生成base64
                            outputPath: 'asset/imgs/'
                        }
                    }
                ]
            },
            { // 解决html中的img标签无法打包输出
                test: /\.(html|html)$/,
                use: [ 'html-withimg-loader' ]
            }
        ]
    },
    plugins: [ // 插件
        new htmlPlugin({ // 注1
            minify: { // 压缩
                removeAttributeQuotes: true // 删除index.html打包后的单引号和双引号
            },
            hash: true, // 打包后的index.html中的资源引用加上hash防止缓存，就是防止改完js、css文件运行后不起效果
            template: './index.html' // 指定index.html模版。即便这里的index.html重命名成任意名称，但打包后的依旧是index.html
        }),
        new uglify(), // 不压缩index.html
        new extractTextPlugin('asset/css/index.css')

    ],
    devServer: { // 开发服务(开发环境)
        contentBase: path.resolve(__dirname, 'dist'), // 热更新，监听资源绝对路径
        host: '192.168.31.163', // 服务器地址
        compress: true, // 启用服务器压缩
        port: 1717 // 端口，可以任意取
    }
}